<template>
  <div>
    <div>
      <van-nav-bar
        title="请假管理"
        left-text="返回"
        right-text="新增请假登记"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <table border="0" cellspacing="0" cellpadding="0">
      <thead>
        <th>姓名</th>
        <th>班级</th>
        <th>请假类型</th>
        <th>离校状态</th>
        <!-- <th>删除状态</th> -->
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item) in newList" :key="item.id" @click="router.push('/detail/'+item.id)">
          <td>{{item.studentName}}</td>
          <td v-if="item.classs">{{item.classs}}</td>
          <td v-else>1班</td>
          <td :style="{'color':item.colors}">{{item.leaveType}}</td>
          <td :style="{'color':item.color}">{{item.state}}</td>
          <!-- <td :style="{'color':item.deleColor}">{{item.isDetele}}</td> -->
          <td>
            <button @click.stop="handleDelete(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { leaveManagement, dele } from "@/model/until";
import { onMounted, reactive, toRefs, computed, ref, watch } from "vue";
import { useRouter } from "vue-router";
import userFlag from "@/hooks/unti";
import userFlags from "@/hooks/un";
userFlag();
const colors = ref("");
const router = useRouter();
const initList = reactive({
  list: []
});
const onClickLeft = () => history.back();
const onClickRight = () => router.push("/addview");
onMounted(() => {
  leaveManagement(
    {},
    { Authorization: window.localStorage.getItem("token") }
  ).then(res => {
    initList.list = res.data.rows;
    console.log(res.data.rows);
  });
});
const handleDelete = id => {
  dele(
    {
      id,
      isDetele: 2
    },
    {
      "Content-Type": "application/json",
      Authorization: window.localStorage.getItem("token")
    }
  ).then(res => {
    Toast.success(res.mag);
    initList.list = initList.list.filter(item => item.id != id);
  });
};
const newList = computed(() => {
  return initList.list.map(item => {
    if (item.leaveType === null) {
      item.leaveType = "未标明";
      item.colors = "red";
    } else if (item.leaveType === 1) {
      item.leaveType = "事假";
      item.colors = "skyblue";
    } else if (item.leaveType === 2) {
      item.leaveType = "病假";
      item.colors = "orange";
    }
    if (item.state === 1) {
      item.state = "已离校";
      item.color = "goldenrod";
    } else if (item.state === 2) {
      item.state = "未离校";
      item.color = "blue";
    }
    // if(item.isDetele === 1){
    //   item.isDetele = '未删除'
    //   item.deleColor = 'green'
    // }else{
    //   item.isDetele = '已删除'
    //   item.deleColor = 'red'
    // }
    return item;
  });
});
userFlags();
</script>

<style lang="scss" scoped>
h2 {
  margin-top: 10px;
  line-height: 30px;
  text-align: center;
}
table {
  padding: 10px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  th,
  td {
    height: 30px;
    border: 1px solid black;
  }
  button {
    outline: none;
    border: 0;
    background: white;
    font-size: 14px;
  }
}
.red {
  color: red;
}
</style>